<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <style>
        body {
            margin: 0;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: #f0f0f0;
            border-bottom: 2px solid #ccc;
        }

        .header .btn-toggle {
            float: right;
            padding: 10px 30px;
            height: 20px;
            line-height: 20px;
            background-color: skyblue;
            margin: 10px 150px 10px 0;
            cursor: pointer;
            color: #fff;
        }

        .header .code {
            /* 隐藏二维码 */
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            border: 2px solid #ccc;
            border-top: 0;
            z-index: 1000;
            background-color: #fff;
            padding: 20px 20px 20px 20px;
        }

        .header .code .btn-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }

        body {
            user-select: none;
        }

        .current {
            display: block;
        }
    </style>
</head>

<body>

    <div class="header">
        <div class="btn btn-toggle"> <span>切换</span></div>
        <div class="code">
            <span class="btn btn-close">×</span>
            <img src="./code.png" alt="">
        </div>
    </div>

    <script>
        // 要求：
        // 点击“切换”， 显示二维码 ,隐藏二维码 
        //点击 “关闭” 按钮 ,隐藏二维码  
        // 步骤：
        // 1、获取元素
        // 2、事件绑定
        // 3、书写处理逻辑

        var btn_toggle = document.querySelector(".btn-toggle");
        // console.log(span_1);
        var del = document.querySelector(".code .btn-close");
        console.log(del);
        var code = document.querySelector(".code");
        var btn_close = document.querySelector(".code .btn-close");
        console.log(btn_close);
        console.log(code);
        // code.onclick = function(event) {
        //     var ele = event.target;
        //     console.log(ele);
        //     // console.log(ele.parentElement);
        //     console.dir(ele.parentElement);
        //     if(btn_close == "btn-close") {
        //         code.removeChild(ele.parentElement);
        //     }
        // }
        btn_toggle.onclick = function () {
            code.style["display"] = "block";
            // code.classList.toggle("current");
        }

        btn_close.onclick = function () {
            code.style["display"] = "none";
        }

        btn_toggle.ondblclick = function () {
                code.style["display"] = "none";
            }






    </script>
</body>

</html>